<template>
  <view
    class="ai-float-btn"
    :style="{ top: posY + 'px', left: posX + 'px' }"
    @touchstart="onTouchStart"
    @touchmove.stop.prevent="onTouchMove"
    @touchend="onTouchEnd"
    @click.stop="goToAIChat"
  >
    <image src="/static/images/ai-customer.png" class="ai-bg-img" />
  </view>
</template>

<script setup>
import { ref } from "vue";

// 定义按钮尺寸、屏幕边距等常量，方便维护
const BTN_SIZE = 55; // 按钮尺寸（px）
const SAFE_MARGIN = 10; // 距离屏幕边缘的安全距离（px）

// 获取系统信息
const sysInfo = uni.getSystemInfoSync();
const windowWidth = sysInfo.windowWidth;
const windowHeight = sysInfo.windowHeight;
const safeBottom = sysInfo.safeAreaInsets?.bottom || 0; // 底部安全区域高度

// 定义按钮位置的响应式变量
const posX = ref(windowWidth - BTN_SIZE - SAFE_MARGIN); // 初始位置靠右
const posY = ref(windowHeight - 200); // 初始位置在屏幕下方

// 定义触摸事件所需的状态变量
let startX = 0,
  startY = 0;
let originX = 0,
  originY = 0;
let isMoved = false; // 标记是否发生了拖动

const onTouchStart = (e) => {
  isMoved = false; // 重置拖动标记
  const touch = e.touches[0];
  startX = touch.pageX;
  startY = touch.pageY;
  originX = posX.value;
  originY = posY.value;
};

const onTouchMove = (e) => {
  isMoved = true; // 标记为已拖动

  const touch = e.touches[0];
  const dx = touch.pageX - startX;
  const dy = touch.pageY - startY;

  // 计算新的位置
  let newPosX = originX + dx;
  let newPosY = originY + dy;

  // 定义边界，确保按钮不会移出屏幕或覆盖底部导航栏
  const leftBoundary = SAFE_MARGIN;
  const rightBoundary = windowWidth - BTN_SIZE - SAFE_MARGIN;
  const topBoundary = SAFE_MARGIN;
  const bottomBoundary = windowHeight - BTN_SIZE - safeBottom - SAFE_MARGIN;

  // 更新位置，并限制在边界内
  posX.value = Math.max(leftBoundary, Math.min(newPosX, rightBoundary));
  posY.value = Math.max(topBoundary, Math.min(newPosY, bottomBoundary));
};

const onTouchEnd = () => {
  // 如果没有拖动，则不执行吸附逻辑
  if (!isMoved) {
    return;
  }

  // 拖动结束后，自动吸附到最近的屏幕一侧
  if (posX.value + BTN_SIZE / 2 < windowWidth / 2) {
    posX.value = SAFE_MARGIN; // 吸附到左侧
  } else {
    posX.value = windowWidth - BTN_SIZE - SAFE_MARGIN; // 吸附到右侧
  }
};

const goToAIChat = () => {
  // 如果是拖动事件，则不触发点击跳转
  if (isMoved) {
    return;
  }
  // 修复路径，指向在pages.json中注册的正确路径
  uni.navigateTo({ url: "/pages/aiChat/index" });
};
</script>

<style scoped>
.ai-float-btn {
  position: fixed;
  z-index: 9999;
  width: 55px; /* 统一使用px单位，便于计算 */
  height: 55px;
  border-radius: 50%;
  /* 移除背景图片，改为使用内部img标签 */
  /* 更有层次感的阴影效果 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
  user-select: none; /* 防止长按选择文字 */
  /* 为位置变化添加过渡动画，实现平滑吸附效果 */
  transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* 增加 overflow: hidden 来裁剪内部图片 */
  overflow: hidden;
}

.ai-bg-img {
  width: 100%;
  height: 100%;
}
</style>
